Помощь сайту

Помощь сайту

Понравился сайт? Внесите вклад в его развитие

Рубрики
Авторизация

Авторизация



Регистрация
Забыли пароль?

liKnopik - jQuery Side Button или боковая кнопка на jQuery

Плагин liKnopik даёт возможность разместить на сайте скользящий выезжающий блок для размещения в нем любого контента. Блок с контентом можно будет скрывать и показывать нажатием на прикрепленную к нему кнопку.
Плагин liKnopik работает совместно с плагином jquery cookie (Klaus Hartl), и дает возможность запомнить состояние плавающего блока (закрытое или открытое).
Блоков на одной странице можно размещать неограниченное количество, главное чтобы они друг другу не мешали

BUG FIX

24.06.2017 - Добавлена поддержка BootStrap, обновление "на лету"
28.05.2013 - При использовании jQuery 2.0 отсутствует поддержка IE 7 и 8
28.05.2013 - Поддержка IE 10
28.05.2013 - Переписана функция определения IE для поддержки jQuery 1.9+
26.01.2013 - Плагин доработан под версии IE 7-9

ПОДКЛЮЧЕНИЕ

Подключаемые файлы

Подключаем CSS "liKnopik"

    	<link rel="stylesheet" href="css/liKnopik.css">
    

Подключаем библиотеку "jQuery" и плагины "jquery.cookie", "jQueryRotate", и конечно же "liKnopik":

   
        <script src="/js/jquery-1.9.1.min.js"></script>
        <script src="/js/jquery.cookie.js"></script>
        <script src="/js/jQueryRotate.3.1.js"></script>
        <script src="/js/jquery.liKnopik.js"></script>
    

Структура HTML

На страничку вставляем следующий код:

        <div class="anyClass">
            <div class="knopikBut">
            	<!-- Текст в кнопке -->
            </div>
            <div class="knopikCont">
            	<!-- Выезжающий контент -->
            </div>
        </div>
    

Инициализация плагина

    $('.anyClass').liKnopik({
        topPos:'50px',      //Положение кнопки по вертикали: 'center' или целое число в пикселях
        sidePos:'right',    //Положение кнопки по горизонтали: 'left' или 'right'	
        startVisible:true   //true или false, Если "true" - содержание кнопки по умолчанию открыто
    });
    

Обновление содержимого кнопок

    $('.anyClass').liKnopik({
	mode:update,
	ButTxt:'Text button',	// текст для обновления в кнопке
	ContTxt: 'Text content', // текст для обновления содержимого
        topPos:'50px',      //Положение кнопки по вертикали: 'center' или целое число в пикселях
        sidePos:'right',    //Положение кнопки по горизонтали: 'left' или 'right'	
        startVisible:true   //true или false, Если "true" - содержание кнопки по умолчанию открыто
    });